<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-toolbar clearfix">
                    <form class="form-inline pull-right" role="form">
                        <div class="form-group m-b-5">
                            <select class="form-control" id="gid" name="gid" size="1">

                            </select>
                        </div>
                        <div class="form-group m-b-5">
                            <input class="form-control" name="originUrl" id="originUrl"
                                   placeholder="请输入原始链接后缀..">
                        </div>
                        <a class="btn btn-default m-b-5" href="#!" id="search_btn"><i class="mdi mdi-magnify"></i> 搜索</a>
                    </form>
                    <div class="toolbar-btn-action">
                        <a class="btn btn-primary m-r-5" href="javascript:createLink();"><i
                                class="mdi mdi-plus"></i>
                            新增</a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="link_table">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var $table = $('#link_table');

    $(document).ready(function (e) {
        initGroup();

        $('#search_btn').click(function () {
            $table.bootstrapTable('refresh');
        })
    });

    function initLinkTable() {
        $table.bootstrapTable({
            url: base_url + short_link_url,         // 请求地址
            showRefresh: false,                     // 刷新按钮
            toolbar: '#toolbar',
            pagination: true,                       // 分页
            sidePagination: 'server',               // 服务器端分页
            pageSize: 10,                           // 每页显示的记录数
            pageList: [10, 20, 50],                 // 可选择的每页记录数
            queryParams: function (params) {        // 请求参数
                var pageNo = params.offset == 0 ? 1 : params.offset == 0;
                return {
                    'gid': $('#gid').val(),
                    'originUrl': $('#originUrl').val(),
                    'pageNo': pageNo,
                    'pageSize': params.limit
                }
            },
            ajaxOptions: {
                headers: {                                          // 请求头
                    'xin-token': $.cookie(admin_token_key)
                }
            },
            onLoadSuccess: function () {
                $('[data-toggle="tooltip"]').tooltip();
            },
            onLoadError: function (status) {                        // 错误处理
                if (status == err_unauthorized) {
                    $.cookie(admin_token_key, '')
                    window.location.href = 'login.html'
                }
            },
            responseHandler: function (resp) {                      // 处理返回数据
                if (resp.code == success_code) {
                    return {
                        total: resp.data.totalCount,
                        rows: resp.data.records
                    }
                } else if (resp.code == err_unauthorized) {
                    $.cookie(admin_token_key, '')
                    window.location.href = 'login.html'
                } else {
                    lightyear.notify(resp.message, 'danger', 2000, 'mdi mdi-emoticon-sad', 'top', 'right');
                }
            },
            columns: [
                {
                    title: '序号',
                    field: 'id',
                    formatter: function (value, row, index) {
                        index++
                        return '<label class="lyear-checkbox checkbox-primary">' +
                            '<input type="checkbox" name="ids" value="' + value + '"><span>' + index++ + '</span>' +
                            '</label>'
                    }
                },
                {
                    title: '短链接',
                    field: 'shortUrl',
                },
                {
                    title: '原始链接',
                    field: 'originUrl'
                },
                {
                    title: '点击数',
                    field: 'clickNum'
                },
                {
                    title: '是否启用',
                    field: 'enableStatus',
                    formatter: function (value, row, index) {
                        if (value == 1) {
                            return '<a class="btn btn-xs btn-default status" data-id="' + row.id + '" data-gid="' + row.gid + '">未启用</a>';
                        } else {
                            return '<a class="btn btn-xs btn-success status" data-id="' + row.id + '" data-gid="' + row.gid + '">启用</a>';
                        }
                    }
                },
                {
                    title: '操作',
                    formatter: function (value, row, index) {
                        return [
                            '<a class="btn btn-xs btn-default view" data-id="' + row.id + '" data-gid="' + row.gid + '" data-origin-url="' + row.originUrl + '" title="查看" data-toggle="tooltip"><i class="mdi mdi-format-list-bulleted"></i></a>' +
                            '<a class="btn btn-xs btn-default remove" data-id="' + row.id + '" data-gid="' + row.gid + '" data-short-url="' + row.shortUrl + '" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>'
                        ].join('');
                    }
                }
            ]
        })

        $table.on('click', '.status', function () {
            var id = $(this).data('id')
            var gid = $(this).data('gid')
            var data = {
                id: id + '',
                gid: gid + ''
            }
            xin_request.put(update_status_short_link_url, data,
                function (data, status, jqXHR) {
                    if (data.code == success_code) {
                        lightyear.notify('更新成功', 'success', 2000, 'mdi-emoticon-happy', 'top', 'right');
                        $table.bootstrapTable('refresh');
                    } else {
                        lightyear.notify(data.message, 'success', 2000, 'mdi mdi-emoticon-sad', 'top', 'right');
                    }
                }, function (jqXHR, textStatus, errorTh) {
                    console.log('更新状态出错', textStatus, errorTh)
                    lightyear.notify('更新失败', 'danger', 2000, 'mdi mdi-emoticon-sad', 'top', 'right');
                    throw errorTh
                });

        });

        // 查看短链接报表
        $table.on('click', '.view', function () {
            openPage('pages/visit_record.html')
        });

        $table.on('click', '.remove', function () {
            var shortUrl = $(this).data('short-url')
            var id = $(this).data('id')
            var gid = $(this).data('gid')

            var url = del_short_link_url + '?id=' + id + '&gid=' + gid

            $.alert({
                title: '确认删除',
                content: '确认要删除【' + shortUrl + '】吗？',
                type: 'orange',
                buttons: {
                    confirm: {
                        text: '确认',
                        btnClass: 'btn-primary',
                        action: function () {
                            xin_request.del(url, {},
                                function (data, status, jqXHR) {
                                    if (data.code == success_code) {
                                        lightyear.notify('删除成功', 'success', 2000, 'mdi-emoticon-happy', 'top', 'right');
                                        $table.bootstrapTable('refresh');
                                    } else {
                                        lightyear.notify(data.message, 'success', 2000, 'mdi mdi-emoticon-sad', 'top', 'right');
                                    }
                                }, function (jqXHR, textStatus, errorTh) {
                                    console.log('删除接口出错', textStatus, errorTh)
                                    lightyear.notify('删除失败', 'danger', 2000, 'mdi mdi-emoticon-sad', 'top', 'right');
                                    throw errorTh
                                })
                        }
                    },
                    cancel: {
                        text: '取消',
                        action: function () {
                            console.log('取消删除');
                        }
                    }
                }
            });
        })
    }

    function initGroup() {
        xin_request.get(group_url, {}, function (result, textStatus, jqXHR) {
            if (result.code == success_code) {
                if (result.data && result.data.length > 0) {
                    var html = '';
                    $.each(result.data, function (i, e) {
                        html += '<option value="' + e.gid + '">' + e.name + '</option>'
                    })
                    $('#gid').html(html);

                    initLinkTable();
                }
            }
        }, function (jqXHR, textStatus, errorTh) {
            console.log('查询分组失败', textStatus, errorTh)
            lightyear.notify('查询分组失败', 'danger', 2000, 'mdi mdi-emoticon-sad', 'top', 'right');
            throw errorTh
        });
    }

    function createLink() {
        openPage('pages/create_link.html')
    }
</script>